<template>
    <div class="success-trade-container">
       <loading v-if="isLoading === true"></loading>
       <template v-if="isLoading === false">
           <form class="common-basic trade-info" name="form" action="javascript:;">
                <div class="trade-title">
                    <p>下單成功</p>
                    <span>{{leftDateDisp}}</span>
                </div>
                <div class="trade-order-num">
                    您的訂單{{adOrderInfor.transOrderId}}已經生成，請在30分鐘內完成付款
                </div>
                <div class="trade-order-info">
                    <div class="col-row">
                        <div class="col-label">
                            <label>付款方式</label>
                        </div>
                        <div class="col-text">
                            <span class="text">{{adOrderInfor.payType}}</span>
                        </div>
                    </div>
                    <div class="col-row" v-show="adOrderInfor.bankInofr">
                        <div class="col-label">
                            <label>所在銀行</label>
                        </div>
                        <div class="col-text">
                            <span class="text">{{adOrderInfor.bankInofr}}</span>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label>賣家姓名</label>
                        </div>
                        <div class="col-text">
                            <span class="text">{{adOrderInfor.name}}</span>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label>{{adOrderInfor.payType}}賬號</label>
                        </div>
                        <div class="col-text">
                            <span class="text copy-div">{{ adOrderInfor.payTypeNum}}</span>
                            <span class="text tips-blue btn" @click="toCopy()">複製</span>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label>付款金額</label>
                        </div>
                        <div class="col-text">
                            <span class="text tips-blue">{{adOrderInfor.totalMoney}}</span>
                            <span class="text">{{adOrderInfor.currency}}</span>
                        </div>
                    </div>
                    <div class="col-row">
                        <div class="col-label">
                            <label>付款參考號</label>
                        </div>
                        <div class="col-text">
                            <span class="text">{{adOrderInfor.payCode}}</span>
                            <span class="tips-blue">付款備註里填寫</span>
                        </div>
                    </div>
                </div>
                <button type="submit"
                    :disabled="false"
                    class="ui-btn ui-btn--block"
                    v-if="isRequesting === false"
                    @click="submit()"
                    >
                    進入訂單完成付款
                </button>
                <button type="submit"
                        class="ui-btn  ui-btn--block"
                        disabled
                        v-if="isRequesting === true">{{ $t('common.waiting') }}...
                </button>
                <div class="trade-notice">
                    <p>確認完成打款並點擊此按鈕後</p>
                    <p>賣家確認收到款項後通知系統將幣打入您的賬戶中，請注意查收。</p>
                </div>
           </form>
       </template>
    </div>
</template>

<script type="text/babel">
    import Clipboard from 'clipboard';
    import service from './service';
    import Loading from '../../../../../grsc-base/component/Loading.vue';
    import moment from 'moment';
    import format from '../../../../common/format';

    export default {
        components: {
           Loading 
        },
        data() {
            return {
                isLoading: true,
                isRequesting: false,
                btn: null,
                clipboard: null,
                leftDateDisp: '',
                adOrderInfor:{
                    bankInofr: '', // 所在银行
                    transOrderId: '', //订单号
                    name: '', // 卖家姓名
                    payCode: '', // 付款参考号
                    payType: '', // 支付方式
                    payTypeNum: '', // 支付方式的卡号账号
                    currency: '', // 付款货币
                    totalMoney: window.decodeURIComponent(this.$route.query.totalMoney) // 共多少CNY
                }
            };
        },
        watch: {

        },
        props: {

        },
        created(){
            service.getOrderInfo({
                transOrderId: this.$route.params.c2cTransOrderNum
            }).done((rep) => {
                // console.log(rep)
                let data;
                if (rep.code === window.CODE.SUCCESS) {
                    data = rep.data;
                    this.isLoading = false;
                    this.adOrderInfor.transOrderId = data.transOrderId;
                    this.adOrderInfor.name = data.dto.name;


                    this.adOrderInfor.currency = data.currency;
                    this.adOrderInfor.payCode = data.payCode;

                    this.adOrderInfor.payType = data.dto.c2cPayType === 'ALIPAY' ? '支付寶' : '銀行卡';

                    this.adOrderInfor.bankInofr = data.dto.bank ? (data.dto.bank + '   ' +data.dto.subBank) : '';

                    this.adOrderInfor.payTypeNum = data.dto.alipayNo || format.get4SpaceBankCode(data.dto.acnumber);  // get4SpaceBankCode 四位一隔方法

                    this.timer(data.currentDate, data.createDate);

                    // this.toCopy()
                }else if(rep.code === '105102'){
                    setTimeout(()=>{
                        window.location.href = './login.html?from=' + window.encodeURIComponent(window.location.href);
                    },2000);
                    window.error(rep.msg);
                }else{
                    window.error(rep.msg);
                }
            });
        },
        methods: {
            timer(currentDate, createDate){
                let that = this;
                let leftDate = 1800000 - (parseInt(currentDate) - parseInt(createDate));

                function time(){
                    if (leftDate <= 1000) {
                        that.leftDateDisp = '付款時間已過期';
                        if(timer){
                            clearInterval(timer);
                        }
                        return false;
                    }
                    that.leftDateDisp = '剩餘'+moment(leftDate).format('mm:ss');
                    leftDate -= 1000;
                }

                time();
                let timer = setInterval(time, 1000)
            },
            submit() {
                window.location.href = './c2c.html#/order/buy';
            },
            toCopy(){
                let that = this;
                this.clipboard = new Clipboard('.btn', {
                    // 点击copy按钮，直接通过text直接返回复印的内容
                    text: function() {
                        return that.adOrderInfor.payTypeNum;
                    }
                });

                //复制成功执行的回调，可选
                this.clipboard.on('success', function(e) {
                    window.success('複製成功')
                    // console.log(e);
                });

                //复制失败执行的回调，可选
                this.clipboard.on('error', function(e) {
                    // console.log(e);
                    window.error('複製失敗')
                });
                this.clipboard = null;
            }
        }
    }
</script>

<style lang="sass" scoped>
.success-trade-container{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #fff;
}
.success-trade-container .tips-blue{
    color: #1396ff;
}
.success-trade-container .trade-title{
    background-image: url('./img/ic_Success.png');
    background-repeat: no-repeat;
    background-size: 35px;
    height: 51px;
    text-align: center;
    background-position: 130px 8px;
    >p{
        font-size: 16px;
        line-height: 30px;
    }
    >span{
        color: #a1a1a1;
        font-size: 12px;
    }
}
.success-trade-container .trade-order-num{
    line-height: 60px;
    color: #333333;
    text-align: center;
}

.success-trade-container .trade-order-info{
    border: 1px solid #efefef;
    background-color: #fbfbfb;
    padding: 30px;
    margin-bottom: 30px;
}

.success-trade-container .trade-info{
    width: 433px;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.success-trade-container .trade-notice{
    padding-top: 17px;
    >p{
        color: #9b9d9e;
        line-height: 25px;
    }
}
.btn{
    cursor: pointer;
}
    
</style>